import { useState, useEffect  } from 'react'
import { View, Text, Input, Form, Button, Swiper ,ScrollView } from '@tarojs/components'
import './index.less'
import { loginaction } from '../../api/user'
import Taro from '@tarojs/taro'
import { getSort } from '../../api/sort'
import SortBlog from './sortBlog.jsx'

export default function Sort(props) {

  const parent_sort = ['前端', 'c语言', 'java', 'Python']
  const [sort, setSort] = useState([])
  const [list, setList] = useState({})
  const [selectP,setSelectP] = useState(0)
  const [selectIndex,setSelectIndex] = useState(0)

  const getSortList = (index) => {
    getSort(index+1).then(res => {
      setSort(res.data.data)
      setSelectIndex(0)
      setSelectP(index)
      toSort(res.data.data[0],0)
    })
  }

  useEffect(() => {
    getSortList(0)
  }, [])

  const toSort = (data,index) => {
    setList(data)
    setSelectIndex(index)
  }
  return (
    <View className="cont">
      <View className='parentSort'>
        {parent_sort.map((item, index) => (
          <View style={selectP==index?{background:'#fff'}:{background:'#f3f2f2'}} onClick={() =>getSortList(index)} >{item}</View>
        ))}
      </View>
      <View className="show">
        <ScrollView className='sort'
        scrollX
        scrollWithAnimation>
          {
            sort.map((item,index) => (
              <View className='sorts' style={selectIndex==index?{color:'#d02530',fontWeight:'900'}:{color:'black',fontWeight:'500'}} onClick={() => toSort(item,index)}>{item.sort_name}</View>
            ))
          }
        </ScrollView>
        <SortBlog  data={list} />
      </View>
    </View>
  )
}
